import React, { memo, useEffect, useState, } from 'react'
import { Sidebar, Toast } from 'react-vant';
import {useDispatch, useSelector} from 'react-redux'
import {sea} from '../store/todo'
import { useSearchParams } from 'react-router-dom';
const Ding = memo(() => {
    const dispacth=useDispatch()
    const [active, setActive] = useState(2);
    const shop=useSelector(state=>state.todo.shop)
    const [query]=useSearchParams()
    const {id}=Object.fromEntries(query)
    
    useEffect(()=>{
        //先给右边盒子加滑动事件
         document.querySelector('.main').onscroll=function(){
            // 拿到所有的大盒子
            let arr= document.querySelectorAll('.lou')
            for(var i=0;i<arr.length;i++){
                if(arr[i].getBoundingClientRect().top<=60){
                    setActive(i)
                }
            }
         }
    })
    useEffect(()=>{
        dispacth(sea())
    },[])
    // 实现楼层效果
    function To(v){
        document.querySelector('#F'+v).scrollIntoView({
            behavior:'smooth',
            block:'start'
        })
    }
  return (
    <div>
        <div className='container'>
        <Sidebar
      value={active}
      onChange={(v) => {
        setActive(v);
       To(v)
      }}
    >
      <Sidebar.Item title="标签名1" />
      <Sidebar.Item title="标签名2" />
      <Sidebar.Item title="标签名3" />
    </Sidebar>
    {/* 右边区域 */}
    <div className='main'>
        <div className='lou' id='F0'>
            {shop.map(item=>(
                <p key={item.id} onClick={()=>{}}>{item.name}</p>
            ))}
        </div>
        <div className='lou' id='F1'>

        </div>
        <div className='lou' id='F2'>

        </div>
    </div>
        </div>
        
    </div>
  )
})

export default Ding